<template>
  <div class="article-manager">
    <div class="i-layout-page-header">
      <i-page-header title="组织架构"></i-page-header>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="artFrom" :model="artFrom">
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="组织架构：" label-for="status2">
              <Input
                search
                enter-button
                placeholder="请输入组织架构"
                v-model="artFrom.cate_name"
                @on-search="userSearchs"
              />
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" v-if="$utils.checkPermissions(paths, 'tissue/save')">
          <Col v-bind="grid">
            <Button type="primary" class="bnt" icon="md-add" @click="tapAdd"
              >添加组织架构</Button
            >
          </Col>
        </Row>
      </Form>
      <vxe-table
        class="mt25"
        highlight-hover-row
        :loading="loading"
        header-row-class-name="false"
        ref="table"
        :tree-config="{ children: 'children', expandAll: true }"
        :data="tableData"
      >
        <vxe-table-column
          field="id"
          title="ID"
          tooltip
          width="80"
        ></vxe-table-column>
        <vxe-table-column
          field="label"
          tree-node
          title="组织架构"
          min-width="250"
        ></vxe-table-column>
        <vxe-table-column
          field="sort"
          title="排序"
          min-width="100"
          tooltip="true"
        ></vxe-table-column>
        <vxe-table-column field="is_show" title="状态" min-width="120">
          <template v-slot="{ row }">
            <i-switch
              v-model="row.is_show"
              :value="row.is_show"
              :true-value="1"
              :false-value="0"
              @on-change="onchangeIsShow(row)"
              size="large"
            >
              <span slot="open">显示</span>
              <span slot="close">隐藏</span>
            </i-switch>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="date"
          title="操作"
          width="250"
          fixed="right"
          align="center"
        >
          <template v-slot="{ row, index }">
            <div
              class="fx-r"
              v-if="$utils.checkPermissions(paths, 'tissue/save')"
            >
              <a @click="tapEdit(row.id)">编辑</a>
              <Divider type="vertical" />
              <a @click="del(row, '删除组织架构', index)">删除</a>
            </div>
          </template>
        </vxe-table-column>
      </vxe-table>
    </Card>

    <Modal v-model="dialogVisible" :title="title" @on-cancel="editClose">
      <el-form ref="menu" :model="menu" label-width="80px">
        <el-form-item
          label="组织架构"
          prop="name"
          :rules="[{ required: true, message: '请输入组织架构' }]"
        >
          <el-input
            placeholder="请输入组织架构"
            autocomplete="off"
            v-model="menu.name"
          ></el-input>
        </el-form-item>

        <el-form-item label="上一级">
          <el-select
            v-model="menu.pid"
            placeholder="上一级"
            style="width: 100%"
          >
            <el-option
              :label="item.html + item.name"
              :value="item.id"
              :key="item.id"
              v-for="item in treeSelect"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序">
          <el-input placeholder="排序越高越前面" v-model="menu.sort"></el-input>
        </el-form-item>

        <el-form-item label="是否禁用" style="margin-bottom: 0">
          <el-radio-group v-model="menu.is_show">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subAdmin">确 定</el-button>
      </span>
    </Modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import IPageHeader from '../../../layouts/system/page-header/index'
import Setting from '../../../setting'
import UiUpload from '../../../ui/upload/index'
import {
  SystemBumenClassTree,
  SystemBumenDel,
  SystemBumenInfo,
  SystemBumenList,
  SystemBumenSave,
  SystemBumenStatus,
} from '../../../api/system/bumen'
export default {
  name: 'product_productClassify',
  components: {
    UiUpload,
    IPageHeader,
  },
  computed: {
    ...mapState('system/user', ['paths']),
  },
  data() {
    return {
      title: '添加城市',
      treeSelect: [],
      FromData: null,
      upUrl: '',
      upHeaders: {},
      dialogVisible: false,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      artFrom: {
        pid: 0,
        is_show: '',
        page: 1,
        cate_name: '',
      },
      tableData: [],
      page: {
        count: 0, //一共多少数量
        pageSize: 0, //每一页码数量
        page: 1, //当前页码
      },
      menu: {
        id: 0,
        cate_name: '',
        pic: '',
        pid: '0',
        is_show: 0,
        sort: 0,
      },
    }
  },
  created() {
    var upHeaders = {}
    //上传路径
    this.upUrl = Setting.apiBaseURL + '/systemv1/upload/index'
    console.log(this.upUrl)
    //上传header数据
    const token = this.$utils.util.cookies.get('system_token')
    if (token) {
      upHeaders['SYSTEM-ACC-TOKEN'] = token
    }
    this.upHeaders = upHeaders
  },
  mounted() {
    this.goodsCategory()
    this.getList()
  },
  methods: {
    // 商品分类；
    goodsCategory() {
      SystemBumenClassTree()
        .then((res) => {
          this.treeSelect = [{ name: '请选择组织', html: '', id: 0 }].concat(
            res.data
          )
        })
        .catch((res) => {
          this.$Message.error(res.msg)
        })
    },
    // 列表
    getList() {
      this.loading = true
      this.artFrom.is_show = this.artFrom.is_show || ''
      this.artFrom.pid = this.artFrom.pid || ''
      SystemBumenList(this.artFrom)
        .then((res) => {
          let data = res.data
          this.tableData = data
          this.loading = false
          this.$nextTick(() => this.$refs.table.setAllTreeExpand(true))
        })
        .catch((err) => {
          this.loading = false
          this.$Message.error(res.msg)
        })
    },
    // 修改状态
    onchangeIsShow(row) {
      let data = {
        id: row.id,
        is_show: row.is_show,
      }
      SystemBumenStatus(data)
        .then(async (res) => {
          this.$Message.success(res.msg)
        })
        .catch((res) => {
          this.$Message.error(res.msg)
        })
    },
    /**
     * 添加新管理人员
     */
    tapAdd: function () {
      this.dialogVisible = true
      this.$refs['menu'].resetFields()
      this.menu = this.$utils.resetFields(this.menu, { status: 1 })
    },
    //上传头像
    handleAvatarSuccess: function (res) {
      if (res.code == -1) {
        Notice.error({
          title: '系统提示',
          content: res.msg,
        })
      } else {
        this.menu.pic = res.data.url
      }
    },
    /**
     * 关闭
     */
    editClose: function () {
      this.dialogVisible = false
    },
    /**
     * 修改数据
     */
    subAdmin: function () {
      this.$refs['menu'].validate((valid) => {
        if (valid) {
          let loading = this.$loading('提交数据中...')
          SystemBumenSave(this.menu)
            .then((res) => {
              loading.close()
              if (res.code == 200) {
                this.dialogVisible = false
                this.$Message.success('操作成功')
                this.getList()
              } else {
                this.$alert(res.msg, '系统提示')
              }
            })
            .catch((err) => {
              loading.close()
              this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
            })
        }
      })
    },
    // 删除
    del(row, tit, num) {
      this.$confirm('此操作将永久删除该栏目分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$utils.loading(this, '删除数据中...')
        SystemBumenDel({ id: row.id })
          .then((res) => {
            this.$utils.loadingClose()
            this.loading = true
            if (res.code == 200) {
              this.getList()
            } else {
              this.$alert(res.msg)
            }
          })
          .catch((err) => {
            this.$utils.loadingClose()
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          })
      })
    },
    /**
     * 修改管理员
     */
    tapEdit: function (id) {
      this.$utils.loading(this, '获取数据中...')
      SystemBumenInfo({ id: id })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.menu = res.data
            this.dialogVisible = true
            this.title = '修改组织'
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1
      this.getList()
    },
  },
}
</script>
